<template>
    <div style="max-width:320px">
        <swiper :slidesPerView="1.2" :spaceBetween="30" :loop="false" :centeredSlides="false" :modules="modules" class="slider-show">
            <swiper-slide v-for="item in slides">
                <div class="product-box slide p-6 md:p-10 bg-white rounded shadow-xl h-full relative overflow-hidden text-black flex flex-col justify-between">
                    <div>
                        <div class="color-deco absolute top-0 w-full h-1.5 bg-alibaba top-0 left-0"></div>
                        <h3 class="text-2xl font-bold text-black mb-2 flex items-center">
                            <img class="w-12 mr-2" :src="item.img" :alt="item.title">
                            {{ item.title }}
                        </h3>
                        <p class="text-gray mb-4" v-html="item.sub"></p>
                        <div v-for="feature in item.features" v-html="feature"></div>
                    </div>
                    <div class="text-center">
                        <div class="relative inline-block px-1 text-center">
                            <small class="text-muted relative">
                                原廠牌價
                                {{ item.originPrice }}
                                ＵＳＤ/月
                                <span class="absolute w-full top-1/2 h-px bg-red left-0"></span>
                            </small>
                        </div><br>
                        <p class="text-orangeLight font-bold text-2xl">${{ item.price }}<span class="text-xs font-normal">
                                USD/月 起</span></p>
                        
                        <div class="relative mb-2 px-1 text-center">
                                <small class="text-muted relative"> 
                                    台幣約
                                    {{ item.price.replace(',','')*32 }}
                                    TWD/月
                                </small>
                            </div>
                        <a class="bg-orange hover:bg-orangeDark text-white text-l font-bold rounded py-2 w-4/5 inline-flex items-center justify-center"
                            href="https://tw.cocloud.com/zh-tw/contact_us/">立即申請</a>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import alibabacloud from '../assets/images/icon-4.webp'


import 'swiper/css';
import { Autoplay } from 'swiper';

export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        const slides = [{
            img: alibabacloud,
            title: '阿里雲',
            sub: 'Anti-DDoS Origin<br>防護多個 IP 位址或網段',
            features: ['<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>10-500 Mbps</span></p>'],
            price: '6,665.2',
            originPrice: '7,016',
            discount: '95'
        }, {
            img: alibabacloud,
            title: '阿里雲',
            sub: 'Anti-DDoS Premium<br>通用業務防護方案',
            features: ['<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>100 Mbps</span></p>'],
            price: '2,498.5',
            originPrice: '2,630',
            discount: '95'
        }, {
            img: alibabacloud,
            title: '阿里雲',
            sub: 'GameShield App<br>防護專案',
            features: [
                '<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>100 Mbps</span></p>',
                '<p class="flex justify-between mb-3"><span>DAU</span><span>80,000</span></p>'
            ],
            price: '1,949.689',
            originPrice: '12,578.62',
            discount: '95'
        },{
            img: alibabacloud,
            title: '阿里雲',
            sub: 'Anti-DDoS Origin<br>防護多個 IP 位址或網段',
            features: ['<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>10-500 Mbps</span></p>'],
            price: '6,665.2',
            originPrice: '7,016',
            discount: '95'
        }, {
            img: alibabacloud,
            title: '阿里雲',
            sub: 'Anti-DDoS Premium<br>通用業務防護方案',
            features: ['<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>100 Mbps</span></p>'],
            price: '2,498.5',
            originPrice: '2,630',
            discount: '95'
        }, {
            img: alibabacloud,
            title: '阿里雲',
            sub: 'GameShield App<br>防護專案',
            features: [
                '<p class="flex justify-between mb-3"><span>流量清洗頻寬</span><span>100 Mbps</span></p>',
                '<p class="flex justify-between mb-3"><span>DAU</span><span>80,000</span></p>'
            ],
            price: '1,949.689',
            originPrice: '12,578.62',
            discount: '95'
        }]
        return {
            modules: [Autoplay], slides, alibabacloud
        };
    },
};

</script>
<style>
.product-box.slide {
    width: 272px;
    height: 418px;
}
.swiper-horizontal {
    overflow: initial;
}
/* .swiper-slide {
    width: 328px;
    height: 408px;
} */
</style>
  